<!--
 * @Description: 登录页
 *   .--,       .--,
 *   ( ( \.---./ ) )
 *   '.__/o   o\__.'
 *      {=  ^  =}
 *       >  -  <
 *      /      \
 *     // blog  \\
 *    //|   .   |\\
 *    "'\       /'"_.-~^`'-.
 *       \  _  /--'
 *     ___)( )(___
 *    (((__) (__)))
 * @Author: Mainkeys
 * @Date: 2023-09-21 23:26:25
 * @LastEditTime: 2023-09-21 23:26:31
 * @LastEditors: Mainkeys
-->
<template>
  <div class="page-content">
    <div class="login-box">
      <div class="switch">
        <el-tooltip :content="status">
          <el-switch
            v-model="status"
            active-color="#13ce66"
            inactive-color="#409eff"
            active-value="R e g i s t e r"
            inactive-value="L o g i n"
          ></el-switch>
        </el-tooltip>
      </div>
      <div class="head">
        <div id="w-line-1">HI,🐀🐀</div>
        <div id="w-line-2">Welcome Back</div>
      </div>
      <div class="form-box">
        <el-form ref="form" :model="form" label-width="0">
          <el-form-item>
            <el-input placeholder="请输入账号" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" placeholder="请输入密码" v-model.trim="form.password"></el-input>
          </el-form-item>
          <el-form-item v-if="status === 'L o g i n'">
            <el-input placeholder="请输入验证码" v-model.trim="form.verify">
              <template slot="suffix">{{ veriCode }}</template>
            </el-input>
          </el-form-item>
          <el-form-item v-if="status === 'R e g i s t e r'">
            <el-input type="password" placeholder="请确认密码" v-model.trim="form.comfirmPassword"></el-input>
          </el-form-item>
          <div class="foot">
            <el-button @click="login" v-if="status === 'L o g i n'">登 录</el-button>
            <el-button @click="register" v-else>注 册</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="card-pane"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status: null,
      form: {
        username: null,
        password: null,
        comfirmPassword: null,
        verify: null,
      },
      veriCode: null
    };
  },
  methods: {
    login () {
      let params = {
        username: this.form.username,
        password: this.form.password,
        verifyCodeKey: this.form.verify
      };
      console.log(params);
      this.$http.post('/user/login', params).then(res => {
        console.log(res);
      });
    },
    register () {
      this.$http.post('/user/register', {
        username: this.form.username,
        password: this.form.password
      }).then(res => {
        console.log(res);
      });
    }
  },
  watch: {
    status (val) {
    }
  },
  created () {
    this.$http.get('/user/getVeryfyCode').then((res) => {
      let { data } = res;
      this.veriCode = data.data.code;
    });
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;

  background: linear-gradient(45deg, #fbda61, #ff5acd);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .login-box {
    display: flex;
    flex-direction: column;
    border: solid 1px skyblue;
    border-radius: 8%;
    box-shadow: 2px 2px 15px 3px rgb(155, 250, 254);
    width: 500px;
    height: 400px;
    margin: auto;
    background-color: #fff;
    .switch {
      width: 40px;
      margin: 0 auto;
    }
    .head {
      margin: auto;
      #w-line-1 {
        color: #7f7f7f;
        font-size: 50px;
      }
      #w-line-2 {
        color: #9c9c9c;
        font-size: 30px;
        margin-top: 17px;
      }
    }
    .form-box {
      position: relative;
      width: 300px;
      margin: auto;
      .foot {
        position: relative;
        left: 110px;
      }
    }
  }
}
</style>